/**
 * 掘金微热榜主要交互逻辑
 * 处理页面交互和数据展示
 */

// 导入数据服务模块
import { fetchHotArticles, getLocalData } from 'https://gitee.com/coder-pig/juejin_file_save/raw/master/hot_articles/js/data-service.js';

// 全局变量
let currentCategory = '1'; // 默认为综合分类
let isLoading = false;

/**
 * 初始化页面
 */
function initPage() {
    // 绑定分类标签点击事件
    bindTabEvents();
    
    // 绑定刷新按钮事件
    bindRefreshEvent();
    
    // 加载默认分类的文章
    loadArticles(currentCategory);
}

/**
 * 绑定分类标签点击事件
 */
function bindTabEvents() {
    const tabs = document.querySelectorAll('.tab');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // 如果点击的是当前激活的标签，不做任何操作
            if (tab.classList.contains('active')) return;
            
            // 更新激活状态
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            
            // 获取分类ID并加载文章
            const categoryId = tab.dataset.category;
            currentCategory = categoryId;
            loadArticles(categoryId);
        });
    });
}

/**
 * 绑定刷新按钮事件
 */
function bindRefreshEvent() {
    const refreshButton = document.querySelector('.refresh-button');
    if (refreshButton) {
        refreshButton.addEventListener('click', () => {
            if (isLoading) return; // 防止重复点击
            
            // 添加旋转动画
            refreshButton.classList.add('rotating');
            
            // 重新加载当前分类的文章
            loadArticles(currentCategory)
                .finally(() => {
                    // 动画结束后移除旋转类
                    setTimeout(() => {
                        refreshButton.classList.remove('rotating');
                    }, 1000);
                });
        });
    }
}

/**
 * 加载指定分类的文章
 * @param {string} categoryId - 分类ID
 * @returns {Promise} - 返回Promise以便处理加载完成事件
 */
function loadArticles(categoryId) {
    // 显示加载状态
    showLoading();
    isLoading = true;
    
    // 返回Promise以便处理加载完成事件
    return new Promise((resolve, reject) => {
        // 尝试从API获取数据
        fetchHotArticles(categoryId)
            .then(articles => {
                renderArticles(articles);
                resolve(articles);
            })
            .catch(error => {
                console.error('获取文章失败:', error);
                // 使用本地数据作为备用
                const localData = getLocalData();
                renderArticles(localData);
                showError('获取数据失败，已显示本地数据');
                reject(error);
            })
            .finally(() => {
                hideLoading();
                isLoading = false;
            });
    });
}

/**
 * 渲染文章列表
 * @param {Array} articles - 文章数据数组
 */
function renderArticles(articles) {
    const articleList = document.querySelector('.article-list');
    if (!articleList) return;
    
    // 清空现有内容
    articleList.innerHTML = '';
    
    // 按order字段排序
    const sortedArticles = [...articles].sort((a, b) => a.order - b.order);
    
    // 渲染每篇文章
    sortedArticles.forEach((article, index) => {
        const rank = index + 1;
        const rankClass = rank <= 3 ? `top${rank}` : '';
        
        const articleItem = document.createElement('li');
        articleItem.className = 'article-item fade-in';
        
        articleItem.innerHTML = `
            <div class="article-rank ${rankClass}">${rank}</div>
            <div class="article-content">
                <h3 class="article-title">
                    <a href="${article.content_url}" target="_blank">${article.ai_title || article.title}</a>
                </h3>
                <div class="article-meta">
                    <span class="article-meta-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-view"></use>
                        </svg>
                        ${formatNumber(article.view)}
                    </span>
                    <span class="article-meta-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-like"></use>
                        </svg>
                        ${formatNumber(article.like)}
                    </span>
                    <span class="article-meta-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-comment"></use>
                        </svg>
                        ${formatNumber(article.comment_count)}
                    </span>
                    <span class="article-meta-item">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-collect"></use>
                        </svg>
                        ${formatNumber(article.collect)}
                    </span>
                </div>
            </div>
        `;
        
        articleList.appendChild(articleItem);
    });
}

/**
 * 格式化数字（大于1000转为k）
 * @param {number} num - 要格式化的数字
 * @returns {string} - 格式化后的字符串
 */
function formatNumber(num) {
    if (num === null || num === undefined) return '0';
    
    if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k';
    }
    return num.toString();
}

/**
 * 显示加载状态
 */
function showLoading() {
    const content = document.querySelector('.content');
    if (!content) return;
    
    // 隐藏可能存在的错误信息
    const errorEl = content.querySelector('.error');
    if (errorEl) errorEl.style.display = 'none';
    
    // 显示加载动画
    let loadingEl = content.querySelector('.loading');
    if (!loadingEl) {
        loadingEl = document.createElement('div');
        loadingEl.className = 'loading';
        loadingEl.innerHTML = `
            <div class="loading-spinner"></div>
            <div>加载中...</div>
        `;
        content.appendChild(loadingEl);
    } else {
        loadingEl.style.display = 'block';
    }
    
    // 隐藏文章列表
    const articleList = content.querySelector('.article-list');
    if (articleList) articleList.style.display = 'none';
}

/**
 * 隐藏加载状态
 */
function hideLoading() {
    const content = document.querySelector('.content');
    if (!content) return;
    
    // 隐藏加载动画
    const loadingEl = content.querySelector('.loading');
    if (loadingEl) loadingEl.style.display = 'none';
    
    // 显示文章列表
    const articleList = content.querySelector('.article-list');
    if (articleList) articleList.style.display = 'block';
}

/**
 * 显示错误信息
 * @param {string} message - 错误信息
 */
function showError(message) {
    const content = document.querySelector('.content');
    if (!content) return;
    
    // 创建或更新错误信息元素
    let errorEl = content.querySelector('.error');
    if (!errorEl) {
        errorEl = document.createElement('div');
        errorEl.className = 'error';
        content.appendChild(errorEl);
    }
    
    errorEl.textContent = message;
    errorEl.style.display = 'block';
}

// 当DOM加载完成后初始化页面
document.addEventListener('DOMContentLoaded', initPage);